<template>
  <div class="main">
    <div class="message">
      <div class="title">留言板</div>
      <div class="content">
        <div :class="['input-wrapper', { 'input-move': flag }]">
          <input
            type="text"
            placeholder="昵称"
            @focus="show"
            v-model="username"
            class="username"
          />
          <input
            type="text"
            placeholder="说点什么吧"
            @focus="show"
            v-model="con"
            class="con "
          />
        </div>
        <div :class="['btn']" @click="send">发送</div>
      </div>
    </div>
    <div class="bullet-box"></div>
  </div>
</template>

<script>
import bullet from "../../assets/js/bullet.js";
import { addMessage, getMessageAll } from "@/api";

export default {
  data() {
    return {
      flag: false,
      list: [],
      unfinish: [],
      con: "",
      num: 0,
      username: ""
    };
  },
  methods: {
    show() {
      var btn = document.querySelector(".btn");
      this.flag = true;
      btn.className = "btn show";
    },
    leave() {
      var btn = document.querySelector(".btn");
      this.flag = false;
      btn.className = "btn leave";
    },
    async getdata() {
      let data = await getMessageAll();
      this.list = data;
      console.log(this.list);
      this.danmu();
    },
    danmu() {
      for (let i = 0; i < this.list.length; i++) {
        var a = new bullet(i, this.list[i].username, this.list[i].content, 100);
        a.draw();
        this.unfinish.push(a);
      }
    },
    async send() {
      var btn = document.querySelector(".btn");
      this.flag = false;
      btn.className = "btn leave";
      if (this.con != "") {
        try {
          await addMessage(this.username || "匿名", this.con);
          this.$message.success("留言成功");
          for (let i = 0; i < this.unfinish.length; i++) {
            if (this.unfinish[i].run) {
              this.unfinish.splice(i, 1);
            }
          }
          var a = new bullet(this.unfinish.length, this.username || "匿名", this.con, 100);
          a.draw();
          this.unfinish.push(a);
          // await this.axios.post("/message/", {
          //   author: "游客",
          //   content: this.con,
          // })
        } catch (err) {
          this.$message.error("留言失败");
        }finally
        {
          this.con = "";
          this.username=""
        }

        this.con = "";
        this.username = "";
      }
    }
  },
  mounted() {
    this.getdata();
  }
};
</script>

<style lang="scss" scoped>
@import "../../assets/css/base.scss";

.main {
  @include bg("/image/wallhaven-vqgx2p.jpg", 100vh);

  .title {
    font-size: 40px;
    font-weight: 900;
  }

  .message {
    display: flex;
    position: relative;
    width: 360px;
    padding-bottom: 20px;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    z-index: 10;

    .content {
      margin-top: 30px;
      display: flex;
      position: relative;

      .input-wrapper {
        width: 250px;
        height: 40px;
        display: flex;

        .username {
          width: 70px;
          margin-right: 5px;
        }

        .con {
          flex: 1;
        }

        input {
          height: 100%;
          //width: 100%;
          border-radius: 20px;
          border: 1px solid #fff;
          background-color: transparent;
          padding: 20px;
          line-height: 100%;
          color: #fff;

          &::-webkit-input-placeholder {
            /* Chrome/Opera/Safari */
            color: #fff;
          }

          &::-moz-placeholder {
            /* Firefox 19+ */
            color: #fff;
          }

          &:-ms-input-placeholder {
            /* IE 10+ */
            color: #fff;
          }

          &:-moz-placeholder {
            /* Firefox 18- */
            color: #fff;
          }
        }

        transition: transform 0.5s;
      }

      .input-move {
        transform: translateX(-54px);
      }

      .btn {
        width: 75px;
        padding: 0 20px;
        height: 40px;
        line-height: 40px;
        border-radius: 20px;
        border: 1px solid #fff;
        cursor: pointer;
        position: absolute;
        left: -129px;
      }

      .show {
        animation: move 0.5s 1 forwards;
      }

      .leave {
        animation: leave 0.5s 1 forwards;
      }
    }
  }
}

@keyframes move {
  0% {
    left: -129px;
    opacity: 0;
  }
  80% {
    opacity: 1;
    left: 230px;
  }
  90% {
    left: 220px;
  }
  100% {
    left: 230px;
  }
}

@keyframes leave {
  0% {
    left: 230px;
    opacity: 1;
  }
  100% {
    left: -129px;
    opacity: 0;
  }
}
</style>
<style lang="scss">
.bullet-box {
  position: absolute;
  top: calc(50% - 30vh);
  height: 60vh;
  width: 100%;

  .bullet {
    display: flex;
    height: 30px;
    font-size: 16px;
    line-height: 30px;
    position: absolute;
    right: 0;
    flex-direction: column;
    align-items: center;
    z-index: 10;

    .name {
      opacity: 0;
      height: 20px;
      line-height: 20px;
      font-size: 12px;
      border-radius: 20px;
      background-color: #fff;
      color: #333;
      position: relative;
      padding: 0 5px;

      &::after {
        display: block;
        content: "";
        height: 0;
        width: 0;
        border-bottom: 6px solid transparent;
        border-top: 6px solid #fff;
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        position: absolute;
        left: calc(50% - 3px);
      }

      span {
        font-size: 12px;
        color: #15f505fd;
      }
    }
  }

  .bullet-show {
    opacity: 1 !important;
  }
}
</style>